<div class="microservice-component">

    <div class="add-new-button-div">
        <div class="add-new-panel panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Add New</h3>
            </div>
            <div class="panel-body">
                <div class="add-button" onclick="addNewHandle()">
                </div>
            </div>
        </div>
    </div>

    <div class="add-microservice-div">
    </div>

    <div class="microservice-list">
    </div>

    <div class="templates">

        <div class="edit-microservice-panel panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title"></div>
            </div>
            <div class="panel-body">
                <div class="name-element edit-panel-element">
                    <div class="name-label edit-element-label">name:</div>
                    <input class="name-value edit-element-value form-control"/>
                </div>
                <div class="context-path-element edit-panel-element">
                    <div class="context-path-label edit-element-label">context path:</div>
                    <input class="context-path-value edit-element-value form-control"/>
                </div>
                <div class="description-element edit-panel-element">
                    <div class="description-label edit-element-label">description:</div>
                    <textarea class="description-value edit-textarea-element-value form-control"/>
                </div>
                <button type="button" class="save-microservice-button btn btn-primary">
                    save
                </button>
                <button type="button" class="cancel-microservice-button btn btn-success">
                    cancel
                </button>
            </div>
        </div>

        <div class="authority-panel">
            <div class="uri-div">
            </div>
            <div class="method-div">
            </div>
            <div class="button-wrap">
                <div class="access-scope-button deny-button" title="Access denied through gateway">
                </div>
                <div class="access-scope-button normal-button" title="Can only be accessed after authorization">
                </div>
                <div class="access-scope-button everyone-button" title="Can access after logging in">
                </div>
                <div class="access-scope-button anonymous-button" title="Can be accessed anonymously">
                </div>
            </div>
        </div>

        <div class="microservice-panel panel panel-info">
            <div class="panel-heading">
                <div class="panel-title"></div>
                <div class="button-wrap">
                    <div class="edit-button"></div>
                    <div class="delete-button"></div>
                </div>
            </div>
            <div class="panel-body">
                <div class="id-element">
                    <div class="id-label body-element-label">id:</div>
                    <div class="id-value body-element-value"></div>
                </div>
                <div class="name-element">
                    <div class="name-label body-element-label">name:</div>
                    <div class="name-value body-element-value"></div>
                </div>
                <div class="context-path-element">
                    <div class="context-path-label body-element-label">context path:</div>
                    <div class="context-path-value body-element-value"></div>
                </div>
                <div class="description-element">
                    <div class="description-label body-element-label">description:</div>
                    <div class="description-value body-element-value"></div>
                </div>

                <div class="authority-list-wrap">
                    <div class="authority-list-button-wrap">
                        <div class="authority-list-show-button" title="Show service list"></div>
                        <div class="refresh-service-button" title="Refresh service list"></div>
                    </div>
                    <div class="authority-list">
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<link type="text/css" rel="stylesheet"
      href="/static/clientlibs/tattoo/authorize/component/microservice-component/css/microservice-component.css"/>
<script type="text/javascript"
        src="/static/clientlibs/tattoo/authorize/component/microservice-component/js/microservice-component.js"></script>
